import { SEGMENT_BUSINESS } from "@/utils/configureTheObject";
import * as echarts from "echarts";
import { cloneDeep } from "lodash";
const EChart = class EChart {
  constructor({ id }) {
    //初始化eCharts对象
    this.chart = id && echarts.init(document.getElementById(id));
    //标题设置
    this.title = {
      left: "center",
      bottom: "42%",
      textStyle: {
        rich: {
          value: {
            fontSize: "20",
            color: "#ffffff",
            padding: [8, 0],
          },
          name: {
            fontSize: "20",
            color: "#ffffff",
          },
        },
      },
    };
    this.tooltip = {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
      confine: true, // 超出范围
      backgroundColor: "rgba(17,95,182,0.5)", //设置背景颜色
      formatter: "{b}<br>{a}：{c}元<br>{a1}：{c1}%",
    };
    this.legend = {
      top: "4%",
      right: "4%",
      itemWidth: 18,
      itemHeight: 10,
      itemGap: 30,
      textStyle: {
        fontSize: 12,
        color: "#fff",
        padding: [0, 0, 0, 10],
      },
    };
    this.grid = {
      top: "18%",
      left: "4%",
      right: "3%",
      bottom: "5%",
      containLabel: true,
    };
    this.xAxis = {
      type: "category",
      data: SEGMENT_BUSINESS.map((item) => item.department),
      axisTick: {
        show: false,
        alignWithLabel: true,
      },
      axisLine: {
        lineStyle: {
          color: "#1C82C5",
        },
      },
      axisLabel: {
        interval: 0,
        margin: 10,
        color: "#05D5FF",
        textStyle: {
          fontSize: 14,
          color: "#A5A9BF",
        },
        formatter: function (value) {
          return value?.split("").join("\n"); //垂直显示
        },
      },
    };
    //系列数据
    this.series = [];
    //图形样式配置
    this.eChartStyle = {
      //最外层-刻度尺
      outermostScale: {
        type: "gauge",
        radius: "75%",
        startAngle: 240,
        endAngle: -60,
        axisLine: {
          lineStyle: {
            color: [[1, "rgba(25, 235, 255, 1)"]],
            width: 1,
          },
        },
        axisTick: {
          distance: -6,
          length: 7,
          lineStyle: {
            color: "rgba(25, 235, 255, 1)",
          },
          splitNumber: 10,
        },
        splitLine: {
          distance: -11,
          length: 14,
          lineStyle: {
            color: "rgba(25, 235, 255, 1)",
            width: 1,
          },
        },
        axisLabel: {
          show: false,
        },
        pointer: {
          show: false,
        },
      },
      //内层带指针
      innerLayerWithPointer: {
        name: "已使用预算",
        type: "gauge",
        radius: "72%",
        startAngle: 240,
        endAngle: -60,
        axisLine: {
          lineStyle: {
            color: [[1, "rgba(25, 235, 255, 0.2)"]],
            width: 40,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        detail: {
          show: false,
        },
        pointer: {
          show: true,
          length: "76%",
          offsetCenter: [0, "-24%"],
          width: 12,
          icon: "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z",
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(255, 92, 119, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(255, 92, 119, 0)",
                },
              ],
            },
          },
        },
        progress: {
          show: true,
          width: 40,
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(255, 92, 119, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(247, 181, 0, 1)",
                },
              ],
            },
          },
        },
      },
      //中心效果圆
      centerEffectCircle: {
        name: "年度预算",
        type: "gauge",
        radius: "44%",
        startAngle: 0,
        endAngle: 360,
        axisLine: {
          lineStyle: {
            color: [[1, "#0AFFE9"]],
            width: 1,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        pointer: {
          show: false,
        },
        progress: {
          show: true,
          width: 80,
          itemStyle: {
            color: {
              type: "radial",
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [
                {
                  offset: 0,
                  color: "rgb(0, 224, 205, 0)",
                },
                {
                  offset: 0.7,
                  color: "rgba(0, 224, 205, 0)",
                },
                {
                  offset: 1,
                  color: "rgba(10, 255, 233, 1)",
                },
              ],
            },
          },
        },
      },
    };
    //完整的配置项
    this.option = {
      tooltip: this.tooltip,
      legend: this.legend,
    };
    //自适应图表
    window.addEventListener("resize", () => this.chart.resize());
  }
  //获取图表基础样式
  getChartStyle() {
    return cloneDeep(this.eChartStyle);
  }
  //获取所需配置文件
  getOriginalOption(configKey) {
    return cloneDeep(
      configKey.reduce((result, key) => {
        if (this[key] !== undefined) {
          result[key] = this[key];
        }
        return result;
      }, {}),
    );
  }
  //存储完整的配置数据
  setConfig(config) {
    this.option = { ...this.option, ...config };
  }
  //设置option
  setOption() {
    this.chart.setOption(this.option);
  }
};
export { EChart };
